<template>
  <div class="page">
    <headerbar>示范点线上观摩</headerbar>
    <section class="frame-content-sub no-bg">
      <div v-if="isRecommendNow==1" class="week-top">
        <!--<div class="icon-text">本周推荐</div>-->
        <div class="icon">
          <img v-if="currRecommend" src="../../../../../static/images/dangjian/home/workingTrends/icon-top.png" alt="">
          <img v-else="" src="../../../../../static/images/dangjian/home/workingTrends/icon-top-none.png" alt="">
        </div>
        <div class="title titleStyle">{{groupName}} </div>
        <div class="btn-up" @click="up()">
          <div v-if="hasUp" class="inner">
            <img src="../../../../../static/images/dangjian/home/workingTrends/week-up-active.png" alt="">
            <span class="text">已点赞</span>
          </div>
          <div v-if="!hasUp" class="inner">
            <img src="../../../../../static/images/dangjian/home/workingTrends/week-up.png" alt="">
            <span class="text">点赞</span>
          </div>
        </div>
      </div>
<!--    <section class="">-->
<!--      <ul class="tab">-->
<!--        <li @click="menu(0)" :class="{'active':tabIndex==0}"><span>固本有方</span></li>-->
<!--        <li @click="menu(1)" :class="{'active':tabIndex==1}"><span>荣誉橱窗</span></li>-->
<!--        <li @click="loadDataH5()" :class="{'active':tabIndex==2}"><span>支部空间</span></li>-->
<!--      </ul>-->
<!--    </section>-->
      <section class="d-scroll-head list-news-img bg-white mgt-0" v-if="tabIndex === 0">
        <fetchData v-if="isLoading" :loading="isLoading" :data="newsQueryData"></fetchData>
        <cube-scroll
          ref="scroll"
          :options="launchOptions"
          @pulling-up="launchOnPullingUp"
        >
          <div class="item" @click="goRedCloudNewsDetail(item)" v-for="(item,index) in newsQueryData" :key="'m' + index">
            <div class="img">
              <img v-if="!item.listPic" src="../../../../../static/images/user_bg.jpg" alt="">
              <img v-if="item.listPic" :src="tools.getImgUrl(item.listPic)" alt="">
            </div>
            <div class="cont">
              <h2 class="title">{{item.title}}</h2>
              <div class="tip no-wrap">
                <span class="no-wrap">{{tools.formatDate(item.createTime)}}</span>
                <!--<span class="source">{{item.source || '未知'}}</span>-->
                <span class="no-wrap">阅读量  {{item.views || 0}}</span>
              </div>
            </div>
          </div>
          <noData :loading="isLoading" v-if="!isLoading && newsQueryData.length ==0" :data="newsQueryData"></noData>
          <div class="more" v-if="isOnclick" @click="more()">更多支部</div>
          <p class="pdv-9"></p>
        </cube-scroll>
        <dialogMore class="ob-dialog" :title="title" ref="dialog">
          <section class="main-dialog">
            <demoHonorDetail></demoHonorDetail>
          </section>
        </dialogMore>
      </section>
    </section>
  </div>
</template>

<script>
import dialogMore from '../../../../components/layout/dialogMore.vue'
import demoHonorDetail from '../../../../components/dangjian/home/demoHonorDetail.vue'
  export default {
    components: { dialogMore,demoHonorDetail },
    name: 'demoHonor',
    data () {
      return {
        title:'',
        pageNo: 1,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        launchOptions: {
          pullUpLoad: true,
          scrollbar: false
        },
        swipeData: [],
        newsQueryData: [],
        pageIndex: 1,
        pageSize: 1000,
        isLoading: true,
        hasUp: false,
        partyGroupId: '',
        currRecommend:true,
        groupName: '',
        dgwName: '',
        isRecommendNow: 0,
        tabIndex: 0,
        currentTabIndex: 0,
        userId: '',
        isOnclick:true ///允许点击更多支部
      }
    },
    watch:{
      $route(to,from){
        console.log(to.path);
      }
    },
    created () {
      console.log('this.$route.query.isOnclick',this.$route.query.isOnclick);
      this.isOnclick = this.$route.query.isOnclick==undefined? true:this.$route.query.isOnclick
      this.userId = this.tools.getUserInfo().id
      this.partyGroupId = this.$route.query.partyGroupId
      this.isRecommendNow = this.$route.query.isRecommendNow
      this.groupName = this.$route.query.groupName
      this.dgwName = this.$route.query.dgwName
      this.tabIndex = this.$store.state.demoHonor_tabIndex || 0
      this.currRecommend = this.$route.query.currRecommend
      console.log('this.currRecommend',this.currRecommend);
      this.newsQuery()
      this.loadData()
      this.recommendRecordViews()
      let key = 'demoHonor_upd_' + this.partyGroupId + this.userId
      this.hasUp = this.$localStorage.get(key)
    },
    methods: {
      go () {
        // this.$router.push({name: 'demoHonor'})
      },
      more () {
        this.$router.push({name: 'demoHonorMore', query: {dgwId: this.partyGroupId, title: this.groupName}})
      },
      loadData () {
        let data = {
          pageNo: this.pageIndex,
          pageSize: this.pageSize,
          partyGroupId: this.partyGroupId
          // partyGroupId: '999001001002'
        }
        console.log('this.userId=', this.userId)// 读取用户id
        console.log('localUserId=', JSON.parse(localStorage.getItem('localUserId')))// 读取用户id

        this.isLoading = true
        this.fetchService.honorQuery(data).then((res) => {
          this.isLoading = false
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          console.log('this.swipeData',this.swipeData)
          if (Array.isArray(res.data)&&this.swipeData.length>0 && !this.isHasFocus(this.swipeData[0].id,res.data)) {
            this.swipeData = this.swipeData.concat(res.data)
          }else{
            this.swipeData = res.data
          }
          this.pageIndex ++
        })
      },
      newsQuery () {
        let data = {
          pageNo: this.pageIndex,
          pageSize: 20,
          partyGroupId: this.partyGroupId,
          type:"1"
          // partyGroupId: '999001001002'
        }
        this.isLoading = true
        this.fetchService.observationQuery(data).then((res) => {
          this.isLoading = false
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          if (Array.isArray(res.data)&&this.newsQueryData.length>0 && !this.isHasFocus(this.newsQueryData[0].id,res.data)) {
            this.newsQueryData = this.newsQueryData.concat(res.data)
          }else{
            this.newsQueryData = res.data
            console.log('this.newsQueryData1',this.newsQueryData)
          }
        })
      },
      getPoster (item) {
        return this.tools.getImgUrl(item.honorPic)
      },
      showImagePreview (item) {
        let imgs = [this.getPoster(item)]
        this.$createImgViewComponent({
          $props: {
            imgSrc: imgs[0],
            content: item.xjsj
          }
        }).show()
        return
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': true
            },
            domProps: {
              innerHTML: item.honorName
            },
            slot: 'header'
          }, '')
        }).show()
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.loadData()
      },
      menu (tabIndex) {
        this.$store.state.demoHonor_tabIndex = tabIndex
        this.swipeData = []
        this.newsQueryData = []
        this.pageIndex = 1
        this.currentTabIndex = tabIndex
        this.tabIndex = tabIndex
        if (tabIndex === 0) {
          this.newsQuery()
        } else if (tabIndex === 1) {
          this.loadData()
        }
      },
      launchOnPullingUp () {
        console.log('launchOnPullingUp')
        this.newsQuery()
      },
      goRedCloudNewsDetail (item) {
        this.title = item.title
        if (item.videoUrl && item.videoUrl !== '') {
          this.updateViews(item.id)
          item.views = item.views ? ++item.views : 1
          let url = item.videoUrl
          if (url.indexOf('?') >= 0) {
            url = url + '&access_token=' + this.tools.getToken()
          } else {
            url = url + '?access_token=' + this.tools.getToken()
          }
          console.log(url)
          if (window.android && window.android.openUrlAdapt) {
            window.android.openUrlAdapt(url)
          }
          // if (window.android && window.android.openUrl) {
          //   window.android.openUrl(url)
          // }
          return
        }
        item.views = item.views ? ++item.views : 1
        this.$store.state.id = item.id
        this.$store.state.isVideo = 1
        this.$store.state.videoDetail = item
        this.$refs.dialog.show()
//        this.$store.state.tempListData = this
//         this.fetchService.contentPageDetail(item.id).then(res =>{
//           if(res.code !== 0){
//             this.tools.tip(res.message)
//             return
//           }
//           // this.dialoNotice = res.data
//           this.$store.state.videoDetail = res.data
//           console.log('this.$store.state.videoDetail',this.$store.state.videoDetail)
//           // this.$store.state.newsDetail = res.data
//           // // 缓存专辑数据
//           // this.$store.state.zhuanjiList = this.list
//           // // 带上专辑标识，详情页进行连续播放
//           // this.$router.push({name: 'videoDetail', query: {id: res.data.id, zhuanji: 1}})
//           this.$refs.dialog.show()
//         })
        // this.$store.state.newsDetail = item
        // this.$router.push({name: 'redCloudNewsDetail', params: {id: item.id, title: '固本有方'}})
      },
      loadDataH5 () {
         this.tools.alert('未开放')
//        this.$router.push({path: `/branchSpace/${this.partyGroupId}`})
      },
      // 点赞
      up () {
        let key = 'demoHonor_upd_' + this.partyGroupId + this.userId
        if (this.hasUp) {
          this.tools.tip('您已点赞过')
          return
        }
        this.fetchService.recommendRecordDianZan(this.partyGroupId).then(res => {
          if (res.code === 0) {
            localStorage.setItem('localUserId', JSON.stringify(this.userId)) //添加缓存
            this.hasUp = true
              this.$localStorage.set(key, true)
            this.tools.tip('点赞成功')
            return
          }
          return this.tools.tip(res.message)
        })
      },
      // 支部浏览量增加
      recommendRecordViews () {
        this.fetchService.recommendRecordViews(this.partyGroupId)
      },
      // 文章浏览量增加
      updateViews (contentId) {
        let params = {
          contentId,
          type: '1'
        }
        this.fetchService.updateCount(params)
      },
      /*判断是否存在某个值*/
      isHasFocus (userId, list) {
        let ret = false
        list.some(v => {
          if (v.id === userId) {
            ret = true
            return false
          }
        })
        return ret
      }
    }
  }
</script>

<style scoped>
  .titleStyle{
    width: 60%;
    margin-right: 14%;
    text-align:center;
  }
  .week-top{
    height:auto;
    min-height: 71px;
  }
</style>
